import React, { Component } from 'react'

import PropTypes from 'prop-types'
export default class Search extends Component {
  static propTypes = {
    setKeywords: PropTypes.func.isRequired
  }

  state = {
    keywords: ''
  }

  setKeywords = (event) => {
    const keywords = event.target.value;
    this.setState({
      keywords
    })
  }

  search = () => {
    const keywords = this.state.keywords.trim();
    if (keywords) {
      this.props.setKeywords(keywords);
    } else {
      alert('输入的内容不能为空')
    }
    this.setState({
      keywords: ''
    })

  }
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input type="text" placeholder="enter the name you search" value={this.state.keywords} onChange={this.setKeywords} />
          <button onClick={this.search}>Search</button>
        </div>
      </section>
    )
  }
}
